<!-- 「团队巅峰赛积分」页面 -->
<template>
  <div class="container">
    <div class="my-info">
      <div
        class="check-rank-btn"
        @click="navigateTo('team-invitation-competition')"
      >
        查看榜单
      </div>
      <div class="now-score">
        <image
          class="icon"
          :src="IMG_URL.COIN"
          mode="aspectFit"
        />
        <div
          class="count"
          :class="teamInviteCompetition?'':'no-team'"
        >
          {{ teamInviteCompetition? teamInviteCompetition?.score || 0:'暂无团队' }}
        </div>
      </div>
      <div class="my-score">
        团队积分
      </div>
      <div class="today-score">
        今日获得积分：<span class="num">{{ teamInviteCompetition?.todayScore }}</span>
      </div>
      <div class="hr" />
      <div class="week-score">
        本周获得积分：<span class="num">{{ teamInviteCompetition?.weekScore }}</span>
      </div>
    </div>
    <div class="score-detail">
      <div class="score-detail-title">
        积分明细
      </div>
      <div
        v-if="!teamInviteCompetition"
        class="no-team-tip"
      >
        您还没有团队，暂无积分
      </div>
      <div
        v-if="!teamInviteCompetition"
        class="create-team-btn"
        @click="onCreateTeamBtnClick"
      >
        创建团队
      </div>
      <div
        v-for="item in teamInviteCompetition?teamInviteCompetitionScoreDetailList:[]"
        :key="item.id"
        class="score-detail-item"
      >
        <image
          class="avatar"
          mode="aspectFill"
          :src="item.avatar"
        />
        <div class="nickname">
          {{ item.nickname }}
        </div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="flow-count">
            {{ item.flowText ? `(${item.flowText})` : '' }}
        </div>
        <div class="time">
          {{ item.time }}
        </div>
        <div class="score">
          {{ item.scoreText }}
        </div>
      </div>
    </div>
  </div>
  <TeamBottomBar
    v-if="teamInviteCompetition"
    :team-name="teamInviteCompetition?.teamName"
    :team-member-list="teamInviteCompetition?.teamMemberList"
  />
  <CreateTeamPopup
    ref="createTeamPopup"
    @confirm="onCreateTeamConfirm"
  />
</template>

<script setup lang="ts">
import CreateTeamPopup from '@/components/CreateTeamPopup.vue';
import TeamBottomBar from '@/components/activity-202310/TeamBottomBar.vue';
import { IMG_URL } from '@/static/constant/activity-202405-constant';
import { useActivity202310 } from '@/stores/activity-202310-store';
import { inviteJoinTeam, onCreateTeamConfirm } from '@/utils/activity-202310-utils';
import { navigateTo } from '@/utils/navigate';

const activity202310Store = useActivity202310();
const {
  teamInviteCompetition,
  teamInviteCompetitionScoreDetailList,
} = storeToRefs(activity202310Store);

const {
  setTeamInviteCompetitionData,
  resetTeamInviteCompetitionScoreDetailList,
  setTeamInviteCompetitionScoreDetailList,
} = activity202310Store;
/** 检查并获取页面相关数据 */
const checkAndGetData = async () => {
  // 检查是否已获取过「个人巅峰赛排行榜」数据
  if (!teamInviteCompetition.value) {
    await setTeamInviteCompetitionData();
  }

  if (!teamInviteCompetition.value) {
    return;
  }

  if (!teamInviteCompetitionScoreDetailList.value.length) {
    setTeamInviteCompetitionScoreDetailList();
  }
};

onShow(() => {
  checkAndGetData();
});

onPullDownRefresh(async () => {
  resetTeamInviteCompetitionScoreDetailList();
  await setTeamInviteCompetitionScoreDetailList();
  uni.stopPullDownRefresh();
});

onReachBottom(() => {
  setTeamInviteCompetitionScoreDetailList();
});

onShareAppMessage(() => inviteJoinTeam());

const currentInstance = getCurrentInstance();

/** 「创建团队」按钮点击事件 */
const onCreateTeamBtnClick = () => {
  const createTeamPopup = currentInstance?.refs.createTeamPopup as typeof CreateTeamPopup;
  createTeamPopup.open();
};
</script>

<style scoped lang="scss">
.container{
  width: 100vw;
  height: 100vh;

  background: #fff;

  padding: 16px;
  display: grid;
  grid-template:
    "my-info" min-content
    '.' 27px
    "score-detail" min-content
    / 1fr;

  .my-info{
    grid-area: my-info;

    position: relative;

    width: 100%;

    background: $board-bg-1;
    border-radius: 16px;

    padding: 35px 0 14px;
    display: grid;
    grid-template:
      "now-score now-score now-score" min-content
      '. . .'5px
      "my-score my-score my-score" min-content
      ". . ." 26px
      "today-score hr week-score" min-content
      / 1fr min-content 1fr;
    align-items: center;
    justify-items: center;

    .check-rank-btn{
      position: absolute;
      top: 22px;
      right: 0;

      width: 67px;
      height: 24px;

      background: rgba($color: #000, $alpha: 40%);
      border-radius: 12px 0 0 12px;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 13px;
      color: #fff;
    }

    .now-score{
      grid-area: now-score;

      width: 100%;

      display: flex;
      column-gap: 8px;
      align-items: center;
      justify-content: center;

      .icon{
        width: 24px;
        height: 24px;
      }

      .count{
        font-size: 28px;
        font-weight: bold;
        color: #fff;

        &.no-team{
          font-size: 14px;
        }
      }
    }

    .my-score{
      grid-area: my-score;

      font-size: 15px;
      color: #fff;
    }

    .today-score{
      grid-area: today-score;
    }

    .week-score{
      grid-area: week-score;
    }

    .today-score,
    .week-score{
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 13px;
      color: #fff;

      .num{
        font-size: 20px;
        color: $text-color--highlight;
      }
    }

    .hr{
      grid-area: hr;

      width: 1px;
      height: 16px;

      background: #fff;
    }
  }

  .score-detail{
    grid-area: score-detail;

    position: relative;

    width: 100%;

    padding-bottom: 220px;
    display: flex;
    flex-direction: column;
    row-gap: 25px;

    .score-detail-title{
      margin-bottom: 2px;

      position: relative;

      width: max-content;

      font-size: 17px;
      color: #333;

      &::after{
        position: absolute;
        bottom: -4px;
        left: 50%;

        width: 40px;
        height: 3px;

        content: '';

        background: #272FD9;

        transform: translateX(-50%);

        display: block;
      }
    }

    .no-team-tip{
      margin-top:80px;

      width: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 15px;
      color: #8b8b8b;
    }

    .create-team-btn{
      position: fixed;
      bottom: 80px;
      left: 50%;
      z-index: 1;

      width: 224px;
      height: 36px;

      background: linear-gradient(99deg,#ff69b7, #8d70ff 100%);
      border-radius: 41px;

      transform: translateX(-50%);

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 15px;
      color: #fff;
    }

    .score-detail-item{
      position: relative;

      width: 100%;

      display: grid;
      grid-template:
        'avatar nickname nickname nickname score' min-content
        'avatar title flow-count time time' min-content
        /min-content max-content min-content max-content 1fr;
      column-gap: 8px;
      align-items: center;

      &::after{
        position: absolute;
        bottom: -12px;

        width: 100%;
        height: 1px;

        content: '';

        background-color:#f7f7f7;
      }

      .avatar{
        grid-area: avatar;

        width: 36px;
        height: 36px;

        border-radius: 50%;
      }

      .nickname{
        grid-area: nickname;

        font-size: 15px;
        color: #333;
      }

      .title{
        grid-area: title;

        font-size: 29rpx;
        color: rgba($color: #000, $alpha: 40%);
      }

      .flow-count{
        grid-area: flow-count;

        width: max-content;

        font-size: 13px;
        color: #8d8d8d;
      }

      .time{
        grid-area: time;
        justify-self: end;

        font-size: 13px;
        color: #8d8d8d;
      }

      .score{
        grid-area: score;
        justify-self: end;

        font-size: 20px;
        color: #27AE60;
      }
    }
  }
}
</style>
